<template>
  <div class="sys-page">
    <el-button
      type="success"
      @click="refresh()"
      round
      style="float:right; margin-top:10px;"
      icon="el-icon-refresh"
    >刷新</el-button>
    <app-title style="width:80%;" :title="dialogTitle"></app-title>

    <el-collapse>
      <el-collapse-item>
        <template slot="title">
          <span style="font-size:20px;color:orange;">搜索</span>
          <i class="header-icon el-icon-search"></i>
        </template>

        <app-search style=" display:flex; width:auto; default: 0;">
          <el-form :inline="true" :model="searchForm" :rules="addRules" ref="searchForm">
            <el-form-item label="身份证查询" prop="user">
              <el-input v-model="searchForm.sfzhm" placeholder="请输入身份证号码"></el-input>
            </el-form-item>
            <el-form-item>
              <div class="block">
                <el-date-picker
                  v-model="value6"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </div>
            </el-form-item>

            <el-form-item>
              <el-button icon="el-icon-delete" @click="reset">清空</el-button>
              <el-button id="zcc" type="primary" @click="search" :disabled="disButton">查询</el-button>
            </el-form-item>
          </el-form>
        </app-search>
      </el-collapse-item>
    </el-collapse>

    <div>
      <el-table v-loading="loading" stripe :data="tableData" :row-class-name="tableRowClassName">
        <el-table-column label="处理人" align="center" width="180" prop="username"></el-table-column>

        <el-table-column label="处理时间点" align="center" width="auto" prop="lastaccesstime"></el-table-column>

        <el-table-column label="处理终端ID" align="center" width="auto" prop="synchronize"></el-table-column>

        <el-table-column label="罚款金额" align="center" width="auto" prop="amount"></el-table-column>

        <el-table-column label="扣分数" align="center" width="auto" prop="scorecost"></el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      ></el-pagination>
    </div>
  </div>
</template>
<style scoped>
.el-table .warning-row {
  background: #f08080;
}
.switch {
  display: block;
  margin: -30px 0 0 85%;
}
.el-table .success-row {
  background: #f0f9eb;
}
.block {
  width: 100%;
  text-align: center;
}
</style>

<script>
import echarts from 'echarts'
import '@/utils/echarts.theme.default'
export default {
  data() {

    var validateUser = (rule, value, callback) => {
      var pattern = /^[a-zA-Z0-9]{1,}$/
      if (value === '') {
        this.disButton = true
        callback(new Error('搜索不能为空'))
      } else if (!pattern.test(value)) {
        this.disButton = true
        callback(new Error('搜索不为允许中文或特殊符号'))
      } else {
        this.disButton = false
      }
    }
    return {
      disButton: true,
      searchForm: {
        sfzhm: ''
      },
      addRules: {
        sfzhm: [
          { required: true, validator: validateUser, trigger: 'change' }
        ]
      },
      value2: [],
      filterMethod(query, item) {
        return item.pinyin.indexOf(query) > -1;
      },

      tableData: [],
      picurl: window.axios_g.BASEURL,
      dialogTitle: "处罚及解档情况查询",
      loading: false,
      picpath: '',
      errorMsg: "您的信息有误，请联系管理员修改",
      reliable: true,
      value6: '',
      // value3: true,
      checked1: true,
      checked2: true,
      currentPage: 1,
      totalCount: 0,
      pageSize: 10,
      pageNum: 1,

    }
  },
  mounted() {
    this.query()
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (this.reliable === false) {
        return 'warning-row';
      } else {
        return 'success-row'
      }
    },

    handleSizeChange: function (val) {
      this.HTTP.methods.apiGet("", val).then(res => {
        if (res.code != 200) {
          this.$message.error('返回数据命令码异常，请联系管理员');
        } else {
          this.tableData = res.data
          this.pageSize = val
        }
      })
    },
    //页码变更
    handleCurrentChange: function (val) {
      this.HTTP.methods.apiGet("", val).then(res => {
        if (res.code != 200) {
          this.$message.error('返回数据命令码异常，请联系管理员');
        } else {
          this.tableData = res.data
          this.pageNum = val
        }
      })
    },

    reset() {
      this.searchForm.sfzhm = ''
      this.value6 = ''
    },

    query() {
      let page = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      this.HTTP.methods.apiGet("http://rap2api.taobao.org/app/mock/123866/punishment_release/chushi", page).then(res => {
        if (res.code != 200) {
          this.$message.error('返回数据命令码异常，请联系管理员');
        } else {
          this.tableData = res.data
          this.totalCount = res.pageLength
        }
      })
    },
    //刷新
    refresh() {
      this.query()
    },

    search() {
      let msg = {
        value6: this.value7.toString(),
        sfzhm: this.searchForm.sfzhm
      }

      this.HTTP.methods.apiPost("", msg).then(res => {
        if (res.code != 200) {
          this.$message.error('返回数据命令码异常，请联系管理员');
        } else {
          this.tableData = res.data
          this.totalCount = res.pageLength
        }
      })
    }
  }
}
</script>

    


    
